<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>Web tailf</title>
    <style type="text/css">
        pre {
            margin: 0px;
        }
    </style>
    <script type="text/javascript" th:src="@{/js/jquery-1.8.3.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/jquery.cookie.js}"></script>
    <script type="text/javascript" th:src="@{/js/tailf-common.js}"></script>
    <script type="text/javascript" th:src="@{/js/tailf-socket.js}"></script>
    <script>

        /**滚动*/
        function scroll_() {
            $('#anchor')[0].scrollIntoView();
        }

        /**获得当前展示的文件绝对路径*/
        function getAbsPath() {
            return $('#pathKey').val();
        }

        /***页面展示上一次搜索的内容*/
        function fillSearchInput() {
            let search_cookie_key = hash(getAbsPath());
            let search_cookie_value = $.cookie(search_cookie_key);
            if (search_cookie_value) {
                $('#search_').val(search_cookie_value);
            }
        }

        /**获得模糊搜索的内容*/
        function getSearchTag() {
            return $('#search_').val();
        }

        /**刷新搜索内容cookie*/
        function freshCookie_() {
            let search_cookie_key = hash(getAbsPath());
            let search_cookie_value = getSearchTag();
            if (search_cookie_value) {
                $.cookie(search_cookie_key, search_cookie_value);
            } else {
                $.cookie(search_cookie_key, '');
            }
        }

        let tf_sock;
        $(function () {

            /**初始化socket对象*/
            initSocket();

            /**页面去除多余的行*/
            setInterval(function () {
                let all = $('.p').length;
                if (all > 800) {
                    let threshold = parseInt(Number(all) * 0.9);
                    $('.p:lt(' + threshold + ')').remove();
                }
            }, 1000);

            /**从cookie获得上一次搜索的内容*/
            fillSearchInput();
        });

        /**重新初始化一个socket连接*/
        function initSocket() {
            if (tf_sock) {
                tf_sock.destroy()
            }
            let pathKey = getAbsPath();
            tf_sock = new TF_SOCK(function () {
                let obj = {};
                obj.cmd = 'bind';
                obj.pathKey = pathKey;
                obj.searchKey = getSearchTag()
                tf_sock.send(JSON.stringify(obj));
            }, function (e) {
                e = e || event; 		         //获取事件，这样写是为了兼容IE浏览器
                freshCookie_();
                let data = e.data;
                let search_ = $('#search_').val();
                if (data.indexOf(search_) > -1) {
                    $('#anchor').before("<pre class='p' style='display: block;'>" + data + "</pre>");
                    scroll_();
                }
            });
            tf_sock.init_socket();
        }

        /**清空搜索cookie*/
        function clearSearch() {
            $('#search_').val('');
            freshCookie_();
        }

        /***手动搜索*/
        function search() {
            if (tf_sock) {
                $('.p').remove();
                /***重新创建一个socket*/
                initSocket();
            }
        }
    </script>
</head>

<body style="font: 13px/21px Arial,sans-serif;">
<div style="position: fixed;left: 0px;top: 0px;">
    <span style="background-color: #8c8c8c;">请输入搜索内容：</span>
    <input id="search_" autocomplete="off" onblur="freshCookie_()">
    <input type="button" value="清空" onclick="clearSearch()">
    <input type="button" value="搜索" onclick="search()">
</div>
<input th:value="${pathKey}" id="pathKey" type="hidden">

<div style="margin-top: 20px;clear: both;">
    <span id='anchor'></span>
</div>

</body>
</html>